<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复习 Object.defineProperty</title>
</head>
<body>
    
    <script>
        let person = {}

        //set和get中的this都是当前对象.(这里指的是person)
        Object.defineProperty(person, 'name', {
            //当修改person.name时 set被调用 set会收到: 新的值
            //vue封装之后会收到之前的值.
            set(value){
                console.log('set被调用了',value);
                //会形成递归
                this.name = value;
            },
            //当读取person.name时 get被调用了,get的返回值就是name的值.
            get(){
                console.log('get被调用了');
                return 100;
            }
        })

        // console.log(person.name);
        person.name = '佩奇'

        //模拟数据代理
        let _data = {msg: '学习香菜猫饼'}
        let vm = {}
        Object.defineProperty(vm,'msg', {
            get(){
                return _data.msg
            },
            set(value){
                _data.msg = {学习香菜猫饼}
            }
        })
    </script>
</body>
</html>